<template>
<div class="home-preview">
  <div class="recommend">
    <div class="idea recommendIdea">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
      <div class="box5"></div>
      <div class="box6"></div>
      <div class="box7"></div>
      <div class="box8"></div>
      <div class="box9"></div>
      <div class="box10"></div>
    </div>

    <div class="title">
      <span>商品信息推荐</span>
    </div>

    <div class="list list4 index-pv1">
      <div v-if="shangpinxinxiRecommend.length>0" class="list-item animation-box" @click="toDetail('shangpinxinxiDetail', shangpinxinxiRecommend[0])">
        <img v-if="preHttp(shangpinxinxiRecommend[0].shangpintupian)" :src="shangpinxinxiRecommend[0].shangpintupian.split(',')[0]" alt="" />
        <img v-else :src="baseUrl + (shangpinxinxiRecommend[0].shangpintupian?shangpinxinxiRecommend[0].shangpintupian.split(',')[0]:'')" alt="" />
        <div class="title-text">
          <div>{{shangpinxinxiRecommend[0].shangpinmingcheng}}</div>
          <div>{{shangpinxinxiRecommend[0].shangpinfenlei}}</div>
        </div>
      </div>
      <div class="list-body">
        <div v-if="shangpinxinxiRecommend.length>1" @click="toDetail('shangpinxinxiDetail', shangpinxinxiRecommend[1])" class="list-item animation-box">
          <img v-if="preHttp(shangpinxinxiRecommend[1].shangpintupian)" :src="shangpinxinxiRecommend[1].shangpintupian.split(',')[0]" alt="" />
          <img v-else :src="baseUrl + (shangpinxinxiRecommend[1].shangpintupian?shangpinxinxiRecommend[1].shangpintupian.split(',')[0]:'')" alt="" />
          <div class="title-text">
            <div>{{shangpinxinxiRecommend[1].shangpinmingcheng}}</div>
            <div>{{shangpinxinxiRecommend[1].shangpinfenlei}}</div>
          </div>
        </div>
        <div v-if="shangpinxinxiRecommend.length>2" @click="toDetail('shangpinxinxiDetail', shangpinxinxiRecommend[2])" class="list-item animation-box">
          <img v-if="preHttp(shangpinxinxiRecommend[2].shangpintupian)" :src="shangpinxinxiRecommend[2].shangpintupian.split(',')[0]" alt="" />
          <img v-else :src="baseUrl + (shangpinxinxiRecommend[2].shangpintupian?shangpinxinxiRecommend[2].shangpintupian.split(',')[0]:'')" alt="" />
          <div class="title-text">
            <div>{{shangpinxinxiRecommend[2].shangpinmingcheng}}</div>
            <div>{{shangpinxinxiRecommend[2].shangpinfenlei}}</div>
          </div>
        </div>
      </div>
      <div class="list-body">
        <div v-if="shangpinxinxiRecommend.length>3" @click="toDetail('shangpinxinxiDetail', shangpinxinxiRecommend[3])" class="list-item animation-box">
          <img v-if="preHttp(shangpinxinxiRecommend[3].shangpintupian)" :src="shangpinxinxiRecommend[3].shangpintupian.split(',')[0]" alt="" />
          <img v-else :src="baseUrl + (shangpinxinxiRecommend[3].shangpintupian?shangpinxinxiRecommend[3].shangpintupian.split(',')[0]:'')" alt="" />
          <div class="title-text">
            <div>{{shangpinxinxiRecommend[3].shangpinmingcheng}}</div>
            <div>{{shangpinxinxiRecommend[3].shangpinfenlei}}</div>
          </div>
        </div>
        <div v-if="shangpinxinxiRecommend.length>4" @click="toDetail('shangpinxinxiDetail', shangpinxinxiRecommend[4])" class="list-item animation-box">
          <img v-if="preHttp(shangpinxinxiRecommend[4].shangpintupian)" :src="shangpinxinxiRecommend[4].shangpintupian.split(',')[0]" alt="" />
          <img v-else :src="baseUrl + (shangpinxinxiRecommend[4].shangpintupian?shangpinxinxiRecommend[4].shangpintupian.split(',')[0]:'')" alt="" />
          <div class="title-text">
            <div>{{shangpinxinxiRecommend[4].shangpinmingcheng}}</div>
            <div>{{shangpinxinxiRecommend[4].shangpinfenlei}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="more-btn" @click="moreBtn('shangpinxinxi')">
      <span>查看更多</span>
      <i v-if="true" class="el-icon-d-arrow-right"></i>
    </div>
  </div>

  <div class="news">
    <div class="idea newsIdea">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
      <div class="box5"></div>
      <div class="box6"></div>
      <div class="box7"></div>
      <div class="box8"></div>
      <div class="box9"></div>
      <div class="box10"></div>
    </div>

    <div class="title">
      <span>活动公告</span>
    </div>

    <div v-if="newsList.length" class="list list10 index-pv1">
      <div v-if="newsList.length>0" @click="toDetail('newsDetail', newsList[0])" class="news-item animation-box">
        <img :src="baseUrl + newsList[0].picture" alt="">
        <div class="news-title">{{newsList[0].title}}</div>
        <div class="news-time">{{newsList[0].addtime.split(' ')[0]}}</div>
        <div class="news-desc">{{newsList[0].introduction}}</div>
        <div class="more">MORE</div>
      </div>
      <div v-if="newsList.length>1" class="news-list">
        <div v-for="(item,index) in newsList" v-if="index<4 && index>0" :key="index" @click="toDetail('newsDetail', item)" class="news-list-item animation-box">
          <div class="news-list-title">{{ item.title }}</div>
          <div class="news-list-time">{{ item.addtime.split(' ')[0] }}</div>
          <div class="news-list-desc">{{ item.introduction }}</div>
          <div class="news-list-line"></div>
        </div>
      </div>
    </div>

    <div class="more-btn" @click="moreBtn('news')">
      <span>查看更多</span>
      <i v-if="true" class="el-icon-d-arrow-right"></i>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      baseUrl: '',
      newsList: [],
      shangpinxinxiRecommend: [],
    }
  },
  created() {
    this.baseUrl = this.$config.baseUrl;
    this.getNewsList();
    this.getList();
  },
  methods: {
    preHttp(str) {
      return str && str.substr(0,4)=='http';
    },
    getNewsList() {
      this.$http.get('news/list', {
        params: {
          page: 1,
          limit: 4,
          sort: 'addtime',
          order: 'desc'
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.newsList = res.data.data.list;
        }
      });
    },
    getList() {
      let autoSortUrl = "shangpinxinxi/autoSort";
      this.$http.get(autoSortUrl, {
        params: {
          page: 1,
          limit: 6,
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.shangpinxinxiRecommend = res.data.data.list;
        }
      });
    },
    toDetail(path, item) {
      this.$router.push({path: '/index/' + path, query: {detailObj: JSON.stringify(item)}});
    },
    moreBtn(path) {
      this.$router.push({path: '/index/' + path});
    }
  }
}
</script>

<style lang="scss" scoped>
.home-preview {
  width: 100%;
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .recommend {
    width: 100%;
    padding: 0;
    margin: 0;
    background: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.-GLlWuiiqzUCAKPZ0T-FkAHaJ4?pid=ImgDet&w=474&h=632&rs=1) fixed center top;
    position: relative;
    height: auto;

    .recommendIdea {
      padding: 0;
      margin: 0 auto;
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background: #efefef;

      .box1 {
        width: 1200px;
        position: absolute;
        top: 74px;
        background: #ef8539;
        height: 1px;
      }

      .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10 {
        width: 20%;
        background: #fff;
        display: none;
        height: 80px;
      }
    }

    .title {
      padding: 0;
      margin: 60px auto 20px;
      text-align: left;
      width: 1200px;
      line-height: 1;
      position: relative;

      span {
        padding: 8px 50px 8px 20px;
        font-size: 30px;
        color: #fff;
        background: linear-gradient(135deg, #e6a23c 0%, #e6a23c 100%);
        font-weight: bold;
      }
    }

    .list4 {
      width: 1200px;
      padding: 0;
      margin: 40px auto;
      overflow: hidden;
      background: none;
      height: auto;

      .list-item {
        cursor: pointer;
        margin: 0;
        border-radius: 4px;
        background: #fff;
        width: 48%;
        position: relative;
        float: left;
        height: 570px;

        img {
          width: 100%;
          object-fit: cover;
          border-radius: 4px;
          float: left;
          height: 100%;
        }

        .title-text {
          white-space: nowrap;
          color: #fff;
          text-align: center;
          bottom: 0;
          overflow: hidden;
          border-radius: 0 0 4px 4px;
          left: 0;
          background: rgba(0,0,0,.3);
          width: 100%;
          line-height: 44px;
          font-size: 16px;
          position: absolute;
          text-overflow: ellipsis;
        }
      }

      .list-body {
        width: 50%;
        margin: 0 0 10px;
        float: right;
        background: none;
        display: inline-block;
        height: 275px;

        .list-item {
          cursor: pointer;
          margin: 0;
          border-radius: 4px;
          background: #fff;
          display: inline-block;
          width: 49%;
          position: relative;
          float: left;
          height: 275px;

          &:nth-child(2) {
            float: right;
            width: 48%;
          }
        }
      }
    }
  }

  .news {
    border: 0;
    padding: 20px 0;
    margin: 40px auto 0;
    overflow: hidden;
    background: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.-GLlWuiiqzUCAKPZ0T-FkAHaJ4?pid=ImgDet&w=474&h=632&rs=1) fixed no-repeat center top;
    width: 100%;
    position: relative;
    height: auto;

    .newsIdea {
      padding: 0;
      margin: 0 auto;
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background: none;

      .box1 {
        width: 1200px;
        margin: 0 auto;
        position: absolute;
        top: 74px;
        background: #08b344;
        height: 1px;
      }
    }

    .title {
      padding: 0;
      margin: 40px auto;
      text-align: left;
      width: 1200px;
      line-height: 1;
      position: relative;

      span {
        padding: 8px 50px 8px 20px;
        font-size: 30px;
        color: #fff;
        background: linear-gradient(135deg, #e6a23c 0%, #e6a23c 100%);
        font-weight: bold;
      }
    }

    .list10 {
      padding: 0;
      margin: 0 auto;
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background: #fff;
      height: auto;

      .news-item {
        cursor: pointer;
        padding: 20px 40px;
        margin: 0;
        background: #f5f5f5;
        display: flex;
        width: 47%;
        position: relative;
        float: left;
        justify-content: space-between;
        height: auto;
        flex-wrap: wrap;

        img {
          padding: 16px;
          margin: 0 0 24px;
          object-fit: cover;
          border-radius: 4px;
          background: url(http://codegen.caihongy.cn/20221119/79d7fa9b750445998801a11399d2bc50.png) no-repeat;
          display: block;
          width: 485px;
          background-size: 100% 100%;
          height: 180px;
          order: 4;
        }

        .news-title {
          padding: 0;
          white-space: nowrap;
          overflow: hidden;
          color: #333;
          width: 100%;
          font-size: 18px;
          line-height: normal;
          text-overflow: ellipsis;
          order: 2;
        }

        .news-time {
          width: 100%;
          margin: 0 0 20px;
          font-size: 30px;
          line-height: 24px;
          color: #aaa;
          order: 1;
        }

        .news-desc {
          padding: 0;
          margin: 10px 0;
          overflow: hidden;
          color: #666;
          background: none;
          width: 100%;
          font-size: 14px;
          line-height: 24px;
          text-indent: 2em;
          order: 3;
          height: 72px;
        }

        .more {
          cursor: pointer;
          border: 1px solid #08b344;
          padding: 0 20px 0 0;
          margin: 0 10px 10px;
          color: #08b344;
          text-align: center;
          background: url(http://codegen.caihongy.cn/20221118/1e65a4c4af854727a6b17466c815fd4f.png) no-repeat 100px 13px;
          display: inline-block;
          width: 160px;
          font-size: 16px;
          line-height: 38px;
          order: 5;
        }
      }

      .news-list {
        margin: 20px 20px 20px 0;
        border: 1px solid #ddd;
        border-width: 1px 0 0 0;
        background: #fff;
        display: flex;
        width: 47%;
        position: relative;
        float: right;
        justify-content: space-between;
        height: auto;
        flex-direction: column;

        .news-list-item {
          cursor: pointer;
          padding: 20px 10px;
          border-bottom: 1px solid #ddd;
          background: none;
          display: flex;
          width: 100%;
          position: relative;
          height: auto;
          flex-wrap: wrap;

          .news-list-title {
            padding: 0;
            white-space: nowrap;
            overflow: hidden;
            color: #333;
            background: none;
            width: 100%;
            font-size: 18px;
            line-height: 1;
            text-overflow: ellipsis;
            order: 1;
          }

          .news-list-time {
            font-size: 14px;
            line-height: 24px;
            position: absolute;
            right: 20px;
            color: #999;
            top: 56px;
          }

          .news-list-desc {
            padding: 0 20% 0 0;
            overflow: hidden;
            color: #666;
            background: url(http://codegen.caihongy.cn/20221118/5f2614a0ca4247c7a52dd7ea8596b89c.png) no-repeat 97% center;
            width: 100%;
            font-size: 14px;
            line-height: 30px;
            text-indent: 2em;
            order: 3;
            height: 60px;
          }

          .news-list-line {
            padding: 0;
            margin: 10px 0 0;
            color: #999;
            background: linear-gradient(135deg, #e6a23c 0%, #e6a23c 100%);
            display: block;
            width: 40px;
            font-size: 12px;
            height: 4px;
            order: 2;
          }
        }
      }
    }
  }

  .more-btn {
    border: 0;
    cursor: pointer;
    margin: 40px auto;
    text-align: center;
    background: url(http://codegen.caihongy.cn/20221118/85c87f82844444f2b945ecfffbbad360.png) repeat-x;
    display: block;
    width: 1200px;
    line-height: 44px;

    span {
      padding: 0 0 0 10px;
      border: 1px solid #ccc;
      border-width: 1px 0 1px 1px;
      margin: 0;
      color: #333;
      background: #eee;
      display: inline-block;
      width: 100px;
      font-size: 16px;
      line-height: 44px;
      height: 44px;
    }

    i {
      padding: 0 20px 0 0;
      border: 1px solid #ccc;
      border-width: 1px 1px 1px 0;
      margin: 0 0 0 -10px;
      color: #333;
      background: #eee;
      display: inline-block;
      width: 40px;
      font-size: 16px;
      line-height: 44px;
      height: 44px;
    }
  }
}

.animation-box {
  transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  z-index: initial;

  &:hover {
    perspective: 1000px;
    transition: 0.3s;
    z-index: 1;
  }

  img {
    transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);

    &:hover {
      filter: brightness(1.1);
      transform: rotate(0deg);
      perspective: 1000px;
      opacity: 0.75;
      transition: all 0.3s ease-in-out 0s;
    }
  }
}

.line1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line2 {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
